<template>
	<view class="iconnavi">
		<view class="order">
			<view class="navitit flexm" @click="navTo('/pages/my/order')">
				<view class="navilftit">我的订单</view>
				<view class="navirgtit" >全部</view>
				<view class="iconfont">
					<image src="../../static/fan.png" mode=""></image>
				</view>
			</view>
			<view class="order-section">
				<view class="order-item" @click="navTo('/pages/my/order')" hover-class="common-hover" :hover-stay-time="50">
					<image class="yticon " src="../../static/my/dfk.png" mode=""></image>
					<view>待付款</view>
					<uni-badge type="error" v-if="toPayOrderCount>0" :text="toPayOrderCount+''"></uni-badge>
				</view>
				<view class="order-item" @click="navTo('/pages/my/order')" hover-class="common-hover" :hover-stay-time="50">
					<image class="yticon " src="../../static/my/dfk.png" mode=""></image>
					<view>待使用</view>
					<uni-badge type="error" v-if="toConfirmOrderCount>0" :text="toConfirmOrderCount+''"></uni-badge>
				</view>
				<view class="order-item" @click="navTo('/pages/my/order')" hover-class="common-hover" :hover-stay-time="50">
					<image class="yticon " src="../../static/my/dfk.png" mode=""></image>
					<view>待收货</view>
					<uni-badge type="error" v-if="afterSaleCount>0" :text="afterSaleCount+''"></uni-badge>
				</view>
				<view class="order-item" @click="navTo('/pages/my/order')" hover-class="common-hover" :hover-stay-time="50">
					<image class="yticon " src="../../static/my/dfk.png" mode=""></image>
					<view>评价</view>
				</view>
				<view class="order-item" @click="navTo('/pages/aftersale/record')" hover-class="common-hover" :hover-stay-time="50">
					<image class="yticon " src="../../static/my/dfk.png" mode=""></image>
					<view>退货/售后</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			navTo(url){	
				
				uni.navigateTo({  
					url
				})  
			}, 
			// Order() {
			// 	uni.navigateTo({
			// 		url: '/pages/orderdetails/orderdetails'
			// 	})
			// }
		}
	}
</script>

<style lang="scss">
	.iconnavi {
		padding: 0 17rpx;
		margin: 20rpx 0;

		.order{
			padding: 0 25rpx;
			background: rgba(255, 255, 255, 1);
			border: 1rpx solid rgba(255, 255, 255, 1);
			border-radius: 16rpx;
			
		}
		.navitit {
			line-height: 80rpx;
			border-bottom: 1rpx solid rgba(240,240,240,1);
			display: flex;
			align-items: center;
			

			.navilftit {
				width: 100%;
			}

			.navirgtit {
				width: 20%;
				font-size: 22rpx;
				color: #999999;
				position: relative;
				text-align: center;
			}
			.iconfont{
				
				image{
					width:8rpx;
					height: 16rpx;
				}
			}
		}
		.order-section{
			display: flex;		
			align-items: center;
			justify-content: space-between;
			
			
			.order-item{
				text-align: center;
				margin:47rpx 0 30rpx 0;
				
				.yticon{
					width:44rpx;
					height: 44rpx;
				}
				
				view{
					font-size:22rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(50,50,50,1);
				}
			}
		}
	}

</style>
